<template>
    <van-nav-bar
        title="评价"
        left-text="返回"
        left-arrow
        @click-left="back"
    />

    <van-form @submit="comment">
        <van-tabs v-model:active="active" @change="TabChange">
            <van-tab :title="item.products.name" v-for="item in products" :name="item.products.id">
                <van-cell-group inset>
                    <van-field
                        v-model="item.comment"
                        name="comment"
                        rows="2"
                        autosize
                        label="评价"
                        type="textarea"
                        maxlength="100"
                        placeholder="请输入评价"
                        show-word-limit
                        id="comment"
                    />
                </van-cell-group>

                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit" v-if="item.status" disabled>
                    已提交
                    </van-button>
                    <van-button round block type="primary" v-if="item.status" @click="delcomment">删除评论</van-button>
                    <van-button round block type="primary" native-type="submit" v-else>
                    提交
                    </van-button>
                </div>
            </van-tab>
        </van-tabs>
        
    </van-form>
</template>

<script setup>
    
    import {getCurrentInstance} from 'vue'  
    const {proxy}  = getCurrentInstance()

    var business = reactive(proxy.$cookies.get('business'))
    var orderid = proxy.$route.query.orderid ? proxy.$route.query.orderid : 0
    orderid = ref(orderid)
    let products = ref({})
    let proid = ref()
    let status = false

    // 钩子函数
    onBeforeMount(() => {
        GetProduct()
    })

    const back = () => {
        proxy.$router.go(-1)
        return false
    }

    let GetProduct = async () => {
        var data = {
            orderid : orderid.value
        }

        var result = await proxy.$POST({
            url: '/order/product',
            params: data
        })

        if(result.code == 0){
            proxy.$fail(result.msg)
            return false
        }else{
            // proxy.$success(result.msg)
            products.value = result.data
            // console.log(products);
            for(var i=0;i<products.value.length;i++){
                // console.log(products.value[i].comment);
                if(products.value[i].comment){
                    products.value[i].status = true
                }else{
                    products.value[i].status = false
                }
            }
            return false
        }

    }

    let delcomment = async () => {
        proxy.$confirm({
            title: '删除评论提醒',
            message: '是否删除该评论'
        }).then(async () => {
            // 组装数据
            var data = {
                busid: business.id,
                proid: proid.value,
                orderid: orderid.value
            }

            var result = await proxy.$POST({
                url: '/order/delcomment',
                params: data
            })

            if(result.code == 0){
                proxy.$fail(result.msg)
                return false
            }else{
                proxy.$success(result.msg)
                GetProduct()
                return false
            }
        }).catch(err => {})
    }

    let comment = async (values) => {
        var data = {
            busid: business.id,
            proid: proid.value,
            orderid: orderid.value,
            comment: values.comment
        }
        // console.log(data);
        var result = await proxy.$POST({
            url: '/order/comment',
            params: data
        })

        if(result.code == 0){
            proxy.$fail(result.msg)
            return false
        }else{
            proxy.$success(result.msg)
            GetProduct()
            return false
        }
    }

    let TabChange = (active) => {
        proid.value = active
        
    }

</script>

<style>
    .van-button{
        margin: 15px 0;
    }

</style>